<?php
/* @var $this SiteController */

$this->pageTitle=Yii::app()->name;

?>
<html>
    <head>
        <meta charset="utf-8" />

        <!-- jQuery and jQuery UI (REQUIRED) -->
        <!--<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl . "/css/jquery-ui-1.10.3.full.min.css" ?>" />-->
        <!--<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl . "/assets/css/jquery-ui-1.10.3.full.min.css" ?>" />-->
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/assets/js/jquery-1.7.2.min.js"></script>
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>-->
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/assets/js/jquery-ui-1.10.3.min.js"></script>
        
         <!--<link href="<?php echo Yii::app()->baseUrl . "/assets/css/bootstrap.min.css" ?>" rel="stylesheet" />-->
        <!--<link href="<?php echo Yii::app()->baseUrl . "/assets/css/font-awesome.min.css" ?>" rel="stylesheet" />-->
        
        <!-- page specific plugin styles -->

        <!--<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl . "/assets/css/datepicker.css" ?>" />-->
        <!--<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl . "/assets/css/ui.jqgrid.css" ?>" />-->
        <!-- fonts -->
        <!--<link href="<?php echo Yii::app()->baseUrl . "/assets/css/ace-fonts.css" ?>" rel="stylesheet" />-->
        <!--styles -->
        <!--<link href="<?php echo Yii::app()->baseUrl . "/assets/css/ace.min.css" ?>" rel="stylesheet" />-->
        <!--<link href="<?php echo Yii::app()->baseUrl . "/assets/css/ace-rtl.min.css" ?>" rel="stylesheet" />-->
        <!--<link href="<?php echo Yii::app()->baseUrl . "/assets/css/ace-skins.min.css" ?>" rel="stylesheet" />-->
        
         <!-- inline styles related to this page -->
        <!-- settings handler -->
        <!--<script src="<?php echo Yii::app()->baseUrl . "/assets/js/ace-extra.min.js" ?>"></script>-->     
        <!--fortawesome-->
        <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">-->
        
        <!-- elFinder CSS (REQUIRED) -->
         <link rel="stylesheet" type="text/css" media="screen" href="<?php echo Yii::app()->baseUrl ?>/css/elfinder.min.css">
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo Yii::app()->baseUrl ?>/css/theme.css">

        <!-- elFinder JS (REQUIRED) -->
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/js/elfinder.min.js"></script>

        <!-- elFinder translation (OPTIONAL) -->
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/js/i18n/elfinder.ru.js"></script>

        <!-- elFinder initialization (REQUIRED) -->
        <script type="text/javascript" charset="utf-8">
            $().ready(function() {
            });
        </script>
        
    </head>
    <body>
<div id="breadcrumbs" class="breadcrumbs">
    
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){};
						</script>

						<ul class="breadcrumb">
							<li>
                                                                                                                                                        <i class="icon-home home-icon"></i>
                                                                                                                                                        <a href="../site/index"><strong>Trang Chủ</strong></a>
							</li>

							<li>
                                                                                                                                                        <a href="../site/category"><strong>Menu</strong></a>
							</li>
						</ul><!-- .breadcrumb -->

						<div id="nav-search" class="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" autocomplete="off" id="nav-search-input" class="nav-search-input" placeholder="Search ...">
									<i class="icon-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- #nav-search -->
</div>    

<div class="page-content">
						<div class="page-header">
							<h1>
                                                                                                                                        <strong>Quản Lý</strong>
								<small>
                                                                                                                                                            <i class="icon-double-angle-right"></i>
                                                                                                                                                            <strong>Quản Lý Sản Phẩm</strong>
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<table id="grid-table"></table>

								<div id="grid-pager"></div>
                                                                
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
                                                                                                                  <div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<table id="grid-item"></table>

								<div id="grid-pager-item"></div>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
<!--                                                <div class="row">
                                                        <button class="btn btn-small" onclick="YNconfirm();" type="button" >Đặt hàng</button>
                                                        <button type="submit" class="width-35 pull-right btn btn-sm btn-primary" onclick="YNconfirm();" name="order" id="order">
                                                        <i class="icon-money"></i>
			Đặt hàng
                                                        </button>
                                                </div>-->                                             
</div><!-- /.page-content -->
				
<!--		 basic scripts -->
                                
		<script type="text/javascript">
			window.jQuery || document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery-2.0.3.min.js"?>'>"+"<"+"/script>");
		</script>

		<!--[if IE]>
                                        <script type="text/javascript">
                                         window.jQuery || document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery-1.10.2.min.js"?>'>"+"<"+"/script>");
                                        </script>
                                        <![endif]-->

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery.mobile.custom.min.js"?>'>"+"<"+"/script>");
		</script>
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/bootstrap.min.js" ?>"></script>
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/typeahead-bs2.min.js"?>"></script>

		<!-- page specific plugin scripts -->
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/date-time/bootstrap-datepicker.min.js"?>"></script>
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/jqGrid/jquery.jqGrid.min.js"?>"></script>
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/jqGrid/i18n/grid.locale-en.js"?>"></script>

		<!-- ace scripts -->
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/ace-elements.min.js"?>"></script>
		<script src="<?php echo Yii::app()->baseUrl."/assets/js/ace.min.js"?>"></script>
		<script type="text/javascript">
//			var grid_data = 
//			[ 
//				{id:"1",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
//				{id:"2",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
//				{id:"3",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
//				{id:"4",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
//				{id:"5",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
//				{id:"6",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
//				{id:"7",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
//				{id:"8",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
//				{id:"9",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
//				{id:"10",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
//				{id:"11",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
//				{id:"12",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
//				{id:"13",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
//				{id:"14",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
//				{id:"15",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
//				{id:"16",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
//				{id:"17",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
//				{id:"18",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
//				{id:"19",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
//				{id:"20",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
//				{id:"21",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
//				{id:"22",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
//				{id:"23",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"}
//			];	
			
			jQuery(function($) {
                           try{
                                                                             //category
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
                                                                            //Item
                                                                             var grid_item = "#grid-item";
				var pager_item = "#grid-pager-item";
                                
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				//enable datepicker
				function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				} 
				//switch element when editing inline
				function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
								.wrap('<label class="inline" />')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}   
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
						.end().find('input[name=stock]')
							  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>');
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
                                }				
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}		
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/*
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
							
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}   
                      function srcimage (value, options) {
                      var el = document.createElement("image");
                      el.width="100";
                      el.height="100";
                      el.src = value;
                      el.onclick="imageClick();";
                      return el;
                    }
                    function myelem (value, options) {
                      var el = document.createElement("image");
                      el.width="100";
                      el.height="100";
                      el.src = value;
                      el.onclick="imageClick();";
                      return el;
                    }
                    
                    function myvalue(elem, operation, value) {
                        try{
                            if(operation === 'get') {
                               return $(elem).val();
                            } else if(operation === 'set') {
                                var image=jQuery('image.customelement',elem);
                               image.val(value);

                            }
                        }catch(e){
                            alert(e);
                        }
                    }
                                /*
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
					data: grid_data,
					datatype: "local",
					height: 250,
					colNames:[' ', 'ID','Last Sales','Name', 'Stock', 'Ship via','Notes'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback}
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						{name:'id',index:'id', width:60, sorttype:"int", editable: true},
						{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
						{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
						{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} 
					], 
			
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					multiselect: true,
                                        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					//editurl: "error.php",//nothing is saved
					caption: "jqGrid with inline editing",
					autowidth: true
				});
                                */
                               
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
                                        url:'../ajax/getCategory', 
                                        datatype: "json",
					height: 250,
					colNames:['','Id','Nhóm Sản Phẩm','Ảnh','link'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions',
							formatoptions:{ 
								keys:true,
//                                                                                                                                                         url:'../ajax/editCategory', datatype:"json",
								delOptions:{recreateForm: true,url:'../ajax/deleteCategory', datatype:"JSON", beforeShowForm:beforeDeleteCallback},
								editformbutton:true, editOptions:{recreateForm: true,url:'../ajax/editCategory', datatype:"JSON", beforeShowForm:beforeEditCallback,closeAfterEdit: true}
							}
						},
                                {name:'Id',index:'Id', width:60, sorttype:"int", hidden: true , editrules: {edithidden:true} },
                                {name:'NameCategory',index:'NameCategory', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
                                                //{name:'LinkImage',index:'LinkImage', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
//                                                {
//                                                    name: 'LinkImage',
//                                                    editable: true,
//                                                    width: 150,
//                                                    fixed: true,
//                                                    formatter: function (cellvalue, options, cell) {                                                   
//                                                        return "<img src='../../"+cellvalue+"' alt='my image'  height='100' width='100'/>";
//                                                    }
//                                                }
                                {
                                name: 'LinkImage',
                                editable: true,
                                fixed: true,

                                edittype: 'image',
                                editoptions: {src: '../../images/photo.png',onclick:'imageClick();',width:'100',height:'100'},   
                                //edittype: 'custom',
                                //editoptions:{custom_element: myelem, custom_value:myvalue},
                                formatter: function (cellvalue, options, cell) {                                                   
                                    return "<img id='row_"+cell.id +"' src='../../files/"+cellvalue+"' alt='my image'  height='100' width='100' OnClick='imageClick();'/>";
                                },
                                unformat: function (cellvalue, options, cell) {                                                   
                                    return $('img', cell).attr('src');
                                }
                                                    
                            },
                                    {
                                name: 'link',
                                editable: true,
                                fixed: true,
                                hidden: true,
                                autoencode: true
                            },
					], 
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					multiselect: true,
                                                                                                multiboxonly: true,
                                                                                                caption: "Nhóm Sản Phẩm",
					autowidth: true,
//                                                                                                cellEdit: true,
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					//editurl: "error.php",//nothing is saved
                                        onSelectRow: function(ids) {                       
                                    if(ids == null) { 
                                        ids=0; 
                                        if(jQuery(grid_item).jqGrid('getGridParam','records') >0 ) {
                                            jQuery(grid_item).jqGrid('setGridParam',{
                                                url:"../ajax/getItems?id="+ids,
                                                page:1
                                            }); 

                                            jQuery(grid_item).jqGrid('setCaption',"Sản Phẩm") .trigger('reloadGrid'); 
                                                                    } } 
                                    else { 
                                        jQuery(grid_item).jqGrid('setGridParam',{
                                            url:"../ajax/getItems?id="+ids,
                                            page:1
                                        }); 

                                        jQuery(grid_item).jqGrid('setCaption',"Sản Phẩm") .trigger('reloadGrid');
                                        }
                                    
                                            }
                            }); 
                           
                           //enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: true,
						editicon : 'icon-pencil blue',
//                                                                                                                   edittitle : 'Chỉnh sửa',
						add: true,
						addicon : 'icon-plus-sign purple',
						del: true,
						delicon : 'icon-trash red',
						search: true,
						searchicon : 'icon-search orange',
						refresh: true,
						refreshicon : 'icon-refresh green',
						view: true,
						viewicon : 'icon-zoom-in grey'
					},
					{
						//edit record form
                                                url:'../ajax/editCategory',
                                                datatype:'json',
                                                recreateForm: true,
                                                closeAfterEdit: true,
                                                editCaption: "Chỉnh sửa",
						beforeShowForm : function(e) {
							var form = $(e[0]);
                                                 
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);
						}
//                                                beforeInitData: function (e) {
//                                                var cm = jQuery(grid_selector).jqGrid('getColProp', 'image'),
//                                                selRowId = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
//                                                var cel = jQuery(grid_selector).jqGrid ('getCell', selRowId, 'image');
//                                                cm.editoptions.src=cel;
//                                                cm.editoptions.width=100;
//                                                cm.editoptions.height=100;
//                                                cm.editoptions.OnClick="imageClick();";
//                                            }
					},
					{
						//new record form
                                                url : '../ajax/insertCategory',
                                                datatype : "json",
                                                addCaption : 'Thêm mới',
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
                                                reloadAfterSubmit:true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);
						}
//                        recreateForm: true,
//                        closeAfterAdd: true,
//                        url:'../ajax/insertCategory',
//                        datatype:"json",
//                        reloadAfterSubmit:true,
//                        afterSubmit: function ()
//                        {   
//                              return [true,'',false]; // no error and no new rowid
//                        }
                                                
					},
					{
						//delete record form
                                                url : '../ajax/deleteCategory',
                                                datatype : "json",
//                                                delCaption : 'Xóa nhóm sản phẩm',
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							form.data('styled', true);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				);
                           
                            jQuery(grid_item).jqGrid({ 
                                        url:'../ajax/getItems', 
                                        datatype: "json",
                                        height: 'auto',
                                        //width:'auto',
                                        colNames:['','ID','Tên Sản Phẩm', 'Giá', 'Mô Tả','Ảnh','Link','Giảm Giá','Đơn Vị'], 
                                        colModel:[ 
                                    {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions',
							formatoptions:{ 
								keys:true,
								delOptions:{recreateForm: true,url:'../ajax/deleteItem', datatype:"JSON", beforeShowForm:beforeDeleteCallback},
								editformbutton:true, editOptions:{recreateForm: true,url:'../ajax/editItem', datatype:"JSON", beforeShowForm:beforeEditCallback, closeAfterEdit: true}
							}
						},
                                                //hidden: true , editable: true, editrules: {edithidden:true}
                                    {name:'Id', index:'Id', width:60, sorttype:"int"}, 
                                    {name:'NameItem', index:'NameItem', width:150, editable: true, editoptions:{size:"20",maxlength:"30"}},
                                    //{name:'IdCategory',index:'IdCategory', width:60, sorttype:"int",editable: true}, 
                                    {name:'Price',index:'Price', width:60, align:"right", sorttype:"float",editable:true},
                                    {name:'Description',index:'Description', width:270, sortable:false, editable:true},
//                                    {
//                                                    name: 'LinkImage', editable: true, width: 120,
//                                                    formatter: function (cellvalue, options, cell) {                                                   
//                                                        return "<img src='../../"+cellvalue+"' alt='my image' height='100' width='100'/>";
//                                                    }
//                                                },
                                    {
                                name: 'LinkImage',
                                editable: true,
                                fixed: true,

                                edittype: 'image',
                                editoptions: {src: '../../images/photo.png',onclick:'imageClick();',width:'100',height:'100'},   
                                //edittype: 'custom',
                                //editoptions:{custom_element: myelem, custom_value:myvalue},
                                formatter: function (cellvalue, options, cell) {                                                   
                                    return "<img id='row_"+cell.id +"' src='../../files/"+cellvalue+"' alt='my image'  height='100' width='100' OnClick='imageClick();'/>";
                                },
                                unformat: function (cellvalue, options, cell) {                                                   
                                    return $('img', cell).attr('src');
                                }                                                  
                            },
                            {
                                name: 'link',
                                editable: true,
                                fixed: true,
                                hidden: true,
                                autoencode: true
                            },
                                    {name:'Discount',index:'Discount', width:80, align:"right", sorttype:"float",editable:true},              
                                    {name:'Unit',index:'Unit', width:60, align:"right", editable:true, editoptions:{defaultValue: 'VND'} } ], 
                                        rowNum:10, 
                                        rowList:[10,20,30], 
                                        pager: pager_item, 
                                        //sortname: 'item', 
                                        viewrecords: true, 
                                        altRows: true,
                                        multiselect: true,
                                        //multiboxonly: true,
                                        autowidth: true, 
                                        caption: "Sản Phẩm",
                            });
                            jQuery(grid_item).jqGrid('navGrid',pager_item,
					{ 	//navbar options
						edit: true,
						editicon : 'icon-pencil blue',
						add: true,
						addicon : 'icon-plus-sign purple',
						del: true,
						delicon : 'icon-trash red',
						search: true,
						searchicon : 'icon-search orange',
						refresh: true,
						refreshicon : 'icon-refresh green',
						view: true,
						viewicon : 'icon-zoom-in grey'
					},
					{
						//edit record form
						closeAfterEdit: true,
                                                url:'../ajax/editItem',
                                                datatype:"json",
                                                editCaption : 'Chỉnh sửa',
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);
						}
//                                                beforeInitData: function (e) {
//                                                var cm = jQuery(grid_selector).jqGrid('getColProp', 'image'),
//                                                selRowId = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
//                                                var cel = jQuery(grid_selector).jqGrid ('getCell', selRowId, 'image');
//                                                cm.editoptions.src=cel;
//                                                cm.editoptions.width=100;
//                                                cm.editoptions.height=100;
//                                                cm.editoptions.OnClick="imageClick();";
//
//                                            }
					},
					{
						//new record form
                                                url:'../ajax/insertItem',
                                                datatype:"json",
                                                addCaption : 'Thêm mới',
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
							style_edit_form(form);

						},
                                                        
                                                                                                },
					{
						//delete record form                     
                                                url:"../ajax/deleteItem",
                                                datatype:"json",
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							form.data('styled', true);
						},
						onClick : function(e) {
                                            
							alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				);
                                   
                                
                           }catch(e){
                                  alert(e);
                           }			

			});
               function imageClick(){
                $( "#dialog-message" ).dialog({
                    title:"",
                    height:600,
                    width:1100,
                    modal: true
                });
					
                var elf = $('#elfinder').elfinder({
                    url : '<?php echo Yii::app()->baseUrl ?>/php/connector.php' // connector URL (REQUIRED)
                    ,lang: 'en',
                    width:'100%',
                    commandsOptions: {
                          getfile: {
                            oncomplete: 'destroy' 
                          }
                    },
                    getFileCallback: function(file) {
                       // var cm = jQuery("#grid-table").jqGrid('getColProp', 'image');
                       // cm.editoptions.src=file;
                       $('#LinkImage').attr('src',file);
                       $('#link').attr('value',file);
                        $( "#dialog-message" ).dialog( "close" );
                     }
                }).elfinder('instance'); 
                
            };
            function YNconfirm() { 
////            if($( "#dialog-confirm" ).dialog({})) {
//                    if (window.confirm("Bạn có chắc?")){
////                        alert("Đồng ý");                     
//                        //REDIRECT
//                        window.location = "../site/order";
//                    }
//                    else{
//                       //DO NOTHING AND STAY IN THE SAME PAGE
//                       return false;
//                    }
                $("#dialog-confirm").dialog({
//            height : auto,
            title : 'Xác nhận',
//            messages : "Bạn có chắc?",
            modal : true,
            
            buttons:{
                'No': function(){
                    $(this).dialog('close');
                },
                'Yes': function(){
//                  redirect
                    window.location = "../site/order";
                    $.ajax({
                        type: "POST",
                        url:'../ajax/insertOrder',
//                        data: { 
//                            method: "releaseTowics",
//                            orderNum: JSON.stringify(ids),
//                            names: JSON.stringify(names)
//                        },
                        dataType: "json",
                        success: function(msg){
                            alert(msg);                            
                        },
                        error: function(res, status, exeption) {
                            alert(res);
                        }
                    });
                }
            }
                });
               };
		</script>
        <div id="dialog-message" >
                        <div id="elfinder"></div>
        </div>
<!--        <div id="dialog-confirm" >
            <p>Bạn có chắc?</p>
        </div>-->
                </body>
</html>